import { isEmptyNode, omit } from '@/utils/share'
import { Button, Empty, Picker } from 'antd-mobile'
import type { PickerProps } from 'antd-mobile/es/components/picker'
import { DownOutline } from 'antd-mobile-icons'
import styles from './index.module.less'
import type { Dictionary } from '@/api/base/interface'
import classNames from 'classnames'

interface CssProps {
    className?: string
    style?: React.CSSProperties
}

export const Plate = (
    props: {
        title: React.ReactNode
        children?: React.ReactNode
        footer?: React.ReactNode
        /** 数据为空时的提示 */
        emptyDescription?: string
        /** 是否显示信息为空时的占位提示。 */
        showEmpty?: boolean

        headerClass?: string
        contentClass?: string
    } & CssProps,
) => {
    const { emptyDescription = '暂无数据' } = props

    return (
        <div className={classNames(styles.plate, props.className)} style={props.style}>
            <div className={classNames(styles.plate_header, props.headerClass)}>{props.title}</div>

            {isEmptyNode(props.children) || props.showEmpty ? (
                <Empty description={emptyDescription} />
            ) : (
                <>
                    <div className={classNames(styles.plate_content, props.contentClass)}>
                        {props.children}
                    </div>
                    <div className={styles.plate_footer}> {props.footer}</div>
                </>
            )}
        </div>
    )
}

/** 选择器 */
export const PlateSelector = (
    props: {
        options: Dictionary.Res
        style?: React.CSSProperties
    } & Partial<PickerProps>,
) => {
    const [val] = props.value ?? []

    /** 转换成【选择组件】需要的数据格式 */
    const transformToColumns = (v: Record<string, any>) =>
        Object.entries(v).map(([value, label]) => ({
            label: String(label),
            value,
        }))

    const onSelected = () => {
        Picker.prompt(
            omit(
                {
                    ...props,
                    columns: [transformToColumns(props.options)],
                },
                ['style'],
            ),
        )
    }

    return (
        <Button
            className={styles.selector}
            style={props.style}
            size="mini"
            fill="none"
            onClick={onSelected}
        >
            <div className={styles.selector_buttonInner}>
                <div className={styles.selector_buttonInner_label} style={props.style}>
                    <span> {val ? props.options[val] : '全部'}</span>
                </div>
                <DownOutline className={styles.selector_icon} fontSize={12} color="#666" />
            </div>
        </Button>
    )
}
